import React, { Component } from 'react';
import './index.css'
class BookClassTags extends Component {
    state = {

    }

    render() {
        const { tags ,idx,moneyId,money ,isfinishId,isfinish} = this.props
        // console.log(idx);
        const tagSty = {
                border:'.013333rem soild #ff6650',
                color:'#ff6650'
        }
        return (
            <div className="tags-all">
                <div className="class-top">
                    <dl>
                        <dd>全部</dd>
                        {
                            tags.map(item =>{
                                return (
                                    <dd key={item.id} 
                                        style={item.id == idx ? tagSty:null}
                                        onClick={ this.changeId(item.id) }
                                        
                                    >{item.name}</dd>
                                   
                                )
                            })
                        }
                        
                    </dl>
                </div>
                <div className="class-center" >
                    <dl>
                        {
                            money.map(item =>{
                                return(
                                    <dd key={item.id} 
                                    style={item.id == moneyId ? tagSty:null}
                                        onClick={this.changeMoney(item.id)}
                                    >{item.txt}</dd>
                                )
                            })
                        }
                    </dl>
                </div>
                <div className="class-bottom">
                    <dl>
                        {
                             isfinish.map(item =>{
                                 return(
                                    <dd key={item.id}
                                    style={item.id === isfinishId ? tagSty:null}
                                    onClick={this.changeIsfinishId(item.id) }
                                    >{item.txt}</dd>
                                 )
                             })
                        }
                        
                    </dl>
                </div>
            </div>
        );
    }
    //根据id去改变小说类型
    changeId  = (id) =>{
        return () =>{
            const { page,isfinish ,money } = this.props
            this.props.getBookClassAllData(id,page,isfinish,money)
        }
    }

    //根据id 去改变 money
    changeMoney = (moneyId) =>{
        return () =>{
            const {idx, page,isfinish } = this.props
            this.props.getBookClassAllData(idx,page,moneyId,isfinish)
        }
    }

    //根据id 去改变 isfinishid
    changeIsfinishId = (isfinishId) =>{
        return () =>{
            const {idx, page,moneyId } = this.props
            this.props.getBookClassAllData(idx,page,moneyId,isfinishId)
        }
    }

}

export default BookClassTags;